import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_provider.dart';
import 'theme_type.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('多主题UI组件示例'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 主题切换区域
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    Text(
                      '选择主题',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                    const SizedBox(height: 16),
                    ...ThemeType.values.map((type) => ListTile(
                      title: Text(_getThemeName(type)),
                      leading: Radio<ThemeType>(
                        value: type,
                        groupValue: themeProvider.themeType,
                        onChanged: (value) => value != null
                            ? themeProvider.setThemeType(value)
                            : null,
                      ),
                      onTap: () => themeProvider.setThemeType(type),
                    )),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 24),

            // 按钮组件展示
            Text(
              '按钮组件',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 12),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: const Text('主要按钮'),
                    ),
                    const SizedBox(height: 12),
                    OutlinedButton(
                      onPressed: () {},
                      child: const Text('次要按钮'),
                    ),
                    const SizedBox(height: 12),
                    TextButton(
                      onPressed: () {},
                      child: const Text('文本按钮'),
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 24),

            // 卡片组件展示
            Text(
              '卡片组件',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 12),
            Card(
              child: ListTile(
                leading: const Icon(Icons.info),
                title: const Text('基础卡片'),
                subtitle: const Text('带阴影和边框的标准卡片样式'),
                trailing: const Icon(Icons.arrow_forward_ios),
                onTap: () {},
              ),
            ),
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('复杂卡片内容'),
                    const SizedBox(height: 8),
                    Text(
                      '这是一个包含多行文本的卡片示例，展示不同主题下的文字颜色和背景色',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                    const SizedBox(height: 12),
                    ElevatedButton(
                      onPressed: () {},
                      child: const Text('卡片内按钮'),
                    ),
                  ],
                ),
              ),
            ),

            const SizedBox(height: 24),

            // 阴影效果展示
            Text(
              '阴影效果',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 12),
            Container(
              height: 100,
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.surface,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Theme.of(context).cardTheme.shadowColor!,
                    blurRadius: 8,
                    spreadRadius: 2,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  '自定义阴影容器',
                  style: Theme.of(context).textTheme.bodyLarge,
                ),
              ),
            ),

            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  // 主题名称映射
  String _getThemeName(ThemeType type) {
    switch (type) {
      case ThemeType.system:
        return '跟随系统';
      case ThemeType.light:
        return '浅色主题（蓝色系）';
      case ThemeType.dark:
        return '深色主题（深蓝系）';
      case ThemeType.custom:
        return '自定义主题（紫色系）';
    }
  }
}
